@extends('skeleton')

@section('title')
  Parada
@endsection('title')

@section('content')
  <div class="container">
    <form method="post" id="area-form" action="modificar-parada" role="form"> 
      {!! csrf_field() !!}
      <div class="form-group">
        <label for="id_parada"> Id Parada </label>
        <input type="text" class="form-control" name="id_parada" placeholder="id de la parada" />
      </div>

      <label for="nombre"> nombre </label>
      <input type="text" class="form-control" name="nombre" placeholder="nombre de la parada" />

      <label for="latitud"> latitud </label>
      <input type="text" class="form-control" name="latitud" placeholder="latitud" />
      <label for="longitud"> longitud </label>
      <input type="text" class="form-control" name="longitud" placeholder="longitud" />

      <button type="submit" class="btn btn-primary" action="submit"> Guardar </button>
      <div id="mapDiv"></div>
    </form>

  </div>
@endsection('content')

@section('scripts')
  <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPcznX7pcAOgCW7-inXDdVOW7lPsj2tYE&sensor=false">
  </script>
  <script src="parada.js"></script>
@endsection('scripts')

@section('styles')
  <style type="text/css">
   #mapDiv { width: 800px; height: 500px; }
  </style>
@endsection('styles')
